<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Map embed test</title>
  <script src="https://cdn.jsdelivr.net/npm/post-robot@8.0.28/dist/post-robot.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet"> 
</head>
<style>
  body {
    margin: 0;
    font-family: 'Lato', sans-serif;
  }
  iframe,
  section {
    width: 49vw;
    height: 100vh;
  }
  section {
    float: right;
  }
  div {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin-bottom: 50px;
  }
  input {
    margin-bottom: 30px;
  }
  label {
    position: relative;
  }
  label > span{
    position: absolute;
    top: -20px;
  }
  button {
    cursor: pointer;
  }
</style>
<body>
  <iframe id="map-iframe" src="http://localhost:3000/map?listeners=true" frameborder="0"></iframe>
  <section>
    <p>To handle interactions with the map iframe we are using <a href="https://github.com/krakenjs/post-robot">postRobot</a> library</p>
    <p>This functions are triggering the postRobot.send() method.</p>
    <p>Check the code of <a href="https://github.com/Vizzuality/half-earth-v3/blob/feature/develop/public/post-robot-example.html">public/post-robot-example.html</a> to see some examples of the implementation of postRobot functionality</p>
    <div>
      <p>Check available layers slugs in this <a href="https://github.com/Vizzuality/half-earth-v3/blob/master/src/constants/layers-slugs.js">file</a></p>
      <span>Layer slug:</span>
      <input type="text" id="selected-layer" placeholder="signed_pledges"/>
      <button onclick="toggleLayer()">Toggle layer</button>
    </div>
    <div>
      <label>
        <span>Layer slug:</span>
        <input type="text" id="layer" placeholder="signed_pledges"/>
      </label>
      <label>
        <span>Opacity level (0 - 1):</span>
        <input type="text" id="opacity" placeholder="0.3"/>
      </label>
      <button onclick="opacity()">opacity</button>
    </div>
    <div>
      <label>
        <span>ZIP code</span>
        <input type="text" id="zip" placeholder="36203"/>
      </label>
      <label>
        <span>Country code</span>
        <input type="text" id="country" placeholder="ES"/>
      </label>
      <button onclick="signedPledge()">signedPledge</button>
    </div>
    <button onclick="fly()">Fly</button>
  </section>
</body>
<script>
  var iframe = document.getElementById('map-iframe');

  function fly() {
    var location = { center: [4, 5], zoom: 8 }
    postRobot.send(iframe, 'mapFlyToCoordinates', location)
  }

  function toggleLayer() {
    var selectedLayer = document.getElementById('selected-layer').value;
    postRobot.send(iframe, 'setMapLayer', {
      layer: selectedLayer
    })
  }

  function opacity() {
    var id = document.getElementById('layer').value;
    var opacity = document.getElementById('opacity').value;
    postRobot.send(iframe, 'setLayersOpacity', {
      layers: [{id, opacity}]
    })
  }

  function signedPledge() {
    var zip = document.getElementById('zip').value;
    var country = document.getElementById('country').value;
    postRobot.send(iframe, 'setFeaturedPledge', {
      layer: {zip, country}
    })
  }
</script>
</html>
